<template>
  <view class="p1756258973">
    <div class="fac mb40">
      <uv-icon name="volume"></uv-icon>
      <div class="fz26 pl20" style="color: #898989;">请保持手机畅通，以免漏接骑士电话</div>
    </div>
    <view class="f" style="align-items: baseline;">
      <view style="font-weight: 500;" class="fz32">预计</view>
      <div class="p1756176389" style="font-weight: 700;">{{orderForm.deliver_time || ''}}</div>
      <view><uv-tags v-if="orderForm.type && typeForm[orderForm.type].text"
          :borderColor="typeForm[orderForm.type]['bgColor']" :text="typeForm[orderForm.type].text"
          :bgColor="typeForm[orderForm.type]['bgColor']" :color="typeForm[orderForm.type]['color']"
          size="mini"></uv-tags>
      </view>
    </view>
    <view class="pt20 " style="width: 100%;">
      <view class=" single-line" style="width: 100%;">
        <view style="display: inline; white-space: nowrap;" class="fz32 ">送至</view>
        <view style="display: inline;" class="fz28">{{orderForm.delivery_address_address}}</view>
      </view>
      <view class="fac pt10 fz28">{{
        orderForm.delivery_address_name}}
        <div class="pl20">{{orderForm.delivery_address_tel}}</div>
      </view>
    </view>
    <div class="p1756199932" :class="'p1756199932-' + orderForm.service_status">
      <div class="p1756199959">
        <uv-icon :color="isDisabledFun(1)" size="50rpx" name="edit-pen"></uv-icon>
        <div :style="{color: isDisabledFun(1)}" class="fz26">修改地址</div>
      </div>
      <div class="p1756199959" @click="tap(2)">
        <uv-icon :color="isDisabledFun(2)" size="50rpx" name="chat"></uv-icon>
        <div :style="{color: isDisabledFun(2)}" class="fz26">联系骑士</div>
      </div>
      <div class="p1756199959" @click="tap(3)">
        <uv-icon :color="isDisabledFun(3)" size="50rpx" name="empty-page"></uv-icon>
        <div :style="{color: isDisabledFun(3)}" class="fz26">取消订单</div>
      </div>
      <div class="p1756199959">
        <uv-icon :color="isDisabledFun(4)" size="50rpx" name="bell"></uv-icon>
        <div :style="{color: isDisabledFun(4)}" class="fz26">催单</div>
      </div>
    </div>
    <uv-popup round="10" ref="popup" mode="bottom">
      <div class="pb40">
        <div class="p1756256678">
          <div class="fz36" style="text-align: center; flex: 1;font-weight: 600;">联系骑士</div>
          <div class="p1756256909">
            <uv-icon @click="tap('popup')" size="40rpx" color="#C9CACA" name="close"></uv-icon>
          </div>
        </div>
        <uv-cell-group :border="false">
          <uv-cell :cellStyle="{padding: '20rpx 30rpx 20rpx 30rpx'}" :iconStyle="{fontSize: '40rpx', color: '#333'}"
            :rightIconStyle="{fontSize: '40rpx', color: '#C9CACA'}" :titleStyle="{fontSize: '30rpx'}" :border="false"
            isLink icon="phone" title="电话骑士" :stop="false"></uv-cell>
          <uv-cell :cellStyle="{padding: '20rpx 30rpx 20rpx 30rpx'}" :stop="false"
            :iconStyle="{fontSize: '40rpx', color: '#333'}" :rightIconStyle="{fontSize: '40rpx', color: '#C9CACA'}"
            :titleStyle="{fontSize: '30rpx'}" :border="false" isLink icon="chat" title="在线联系"></uv-cell>
        </uv-cell-group>
      </div>
    </uv-popup>
  </view>

</template>
<script>
  import dataJsonMixin from '../mixin/dataJson.js'
  export default {
    mixins: [dataJsonMixin],
    props: {
      orderForm: {
        type: Object,
        default: () => { }
      }
    },
    data() {
      return {

        routeQuery: {}
      }
    },
    onReady(e) {
    },
    onLoad(options) {
      if (options) this.routeQuery = options
    },
    onShow() {

    },
    methods: {
      tap(data) {
        let s = this.orderForm.service_status
        let { service_status, type, status } = this.orderForm
        let disabledType = this.isDisabledFun(data)
        if (data == 2) {
          this.$refs.popup.open()
        }
        if (data == 'popup') {
          this.$refs.popup.close()
        }
        if (disabledType == '#9FA0A0') return
        if (data == 3) {
          uni.navigateTo({ url: '/pages-worker/cancelOrder?id=' + this.orderForm.id });
        }

      },
      cancelOrderClick() {
        uni.navigateTo({
          url: '/pages-worker/cancelOrder?id=' + this.orderForm.id
        });
      },
      // `service_status` tinyint unsigned NOT NULL DEFAULT '0' COMMENT '服务状态：0=待办事项，1=新任务，2=待取货/待服务，3=服务中，4=已完成，5=已取消',
      isDisabledFun(data) {
        let s = this.orderForm.service_status
        let { service_status, type, status } = this.orderForm

        if (data == 1) {
          if (type == 4 || type == 5) {
            if (service_status == 2 || service_status == 3 || service_status == 4 || service_status == 5) {
              return '#9FA0A0'
            }
          } else {
            if (service_status == 3 || service_status == 4 || service_status == 5) {
              return '#9FA0A0'
            }
          }
          return '#333'
        } else if (data == 2) {
          return '#333'
        } else if (data == 3) {
          if (type == 4 || type == 5) {
            if (service_status == 2 || service_status == 3 || service_status == 4 || service_status == 5) {
              return '#9FA0A0'
            }
          } else {
            if (service_status == 3 || service_status == 4 || service_status == 5) {
              return '#9FA0A0'
            }
          }
          return '#333'
        } else if (data == 4) {
          if (service_status == 3) {
            if (type == 3) {
              if (this.orderForm.is_initiation_of_payments == 1) return '#333'
              return '#333'
            }
            if(type == 1 || type == 2) {
              return '#333'

            }
            return '#9FA0A0'
          } else if (service_status == 4) {
            return '#9FA0A0'
          } else if (service_status == 5) {
            return '#9FA0A0'
          }
          return '#333'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '../common.scss';
  .c9FA0A0 {
    color: #9FA0A0
  }

  .c333 {
    color: #333
  }

  .p1756199932 {
    display: flex;
    justify-content: space-between;
    border-top: 2rpx solid #efefef;
    margin-top: 30rpx;
    padding-top: 30rpx;

    .p1756199959 {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 25%;
      min-width: 25%;
      text-align: center;
    }
  }

  .mb40 {
    margin-bottom: 40rpx;
  }

  .p1756176389 {
    font-size: 50rpx;
  }

  .p1756256678 {
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 40rpx;
    padding-bottom: 20rpx;

    .p1756256909 {
      position: absolute;
      right: 30rpx;

    }
  }

  .pb40 {
    padding-bottom: 40rpx;
  }

  .p1756258973 {}
</style>